<template>
    <div class="options-series">
        <Checkbox v-if="haxY" v-model="yAxisState"  class="p-b-10" @on-change="changeYaxis"	>区分y轴</Checkbox>
        <div  class=""  v-for="(item,index) in seriesHandle" :key="index"
            :class="{'p-b-10 dashed-bottom':index<series.length-1,'p-t-10':index>0}"
            v-if=" haxY && (item.type=='bar' || item.type=='line' || item.type =='scatter') && item.number" >
            <h4 class="series-title">{{item.number.kpiName}}</h4>
            <Checkbox v-model="item.showThreshold" @on-change="changeSeries(item, index)">最优值线</Checkbox>
            <Checkbox v-model="item.showBest"  @won-change="changeSeries(item, index)"	>上下阈值线</Checkbox>
            <!-- <div class="right-row"  >
                <span class="r-tit">数值名称</span>
                <div class="r-cnt">
                    <Input    v-model="item.name"  > </Input>
                </div>
            </div>
            <div class="right-row" v-if="item.show">
                <span class="r-tit">标线类型</span>
                <div class="r-cnt">
                    <Select  class="box-class" placeholder="大小" v-model="item.markLine.data[0].type" @on-change="lineTypechange(item.markLine.data[0].type,index)" >
                        <Option  v-for="(it,sindex) in lineType" :key="sindex" :label="it.name" :value="it.type">
                        </Option>
                    </Select>
                </div>
            </div>
            <div class="right-row" v-if="item.show && item.markLine.data[0].type=='1'">
                <span class="r-tit">自定义数值</span>
                <div class="r-cnt">
                    <Input    v-model="item.markLine.data[0].yAxis"  > </Input>
                </div>
            </div>
            <div class="right-row" v-if="item.show">
                <span class="r-tit">标线名称</span>
                <div class="r-cnt">
                    <Input    v-model="item.markLine.data[0].name"  > </Input>
                </div>
            </div> -->
        </div>
    </div>
</template>
<script>
import util from 'util'
//设置图表属性  series
export default {
    props:{
        graphOptions:{
            type:Object
        },
        series:{
            type:Array,
            default:function () {
                return [];
            }
        },
        numbers: {
          type:Array,
          default:function () {
              return [];
          }
        }
    },
    computed:{
        haxY(){
            if(this.graphOptions.yAxis !=null ){
                return true;
            }else{
                return false;
            }
        }
    },
    data(){
        return{
            yAxisState:false,
            lineType:[
                {type: 'average', name: '平均值'},
                {type: 'min', name: '最小值'},
                {type: 'max', name: '最大值'},
                {type: '1', name: '自定义'},
            ],
            seriesHandle: []
        }
    },
    methods:{
        //区分y轴  每一个数值值  对应一个y轴
        changeYaxis(value){
            for(var i in this.series){
                this.$set(this.series[i],'yAxisIndex',value?parseInt(i):0)
            }
        },
        changeSeries(item, index){
          let down = {
            name: '下限值',
            yAxis: item.number.downValue
          }
          let up = {
            name: '上限值',
            yAxis: item.number.upValue
          }
          let good = {
            name: '最优值',
            yAxis: item.number.goodValue
          }
          let data = {}
          if (item.showThreshold && item.showBest) {
            data.data = [down, up, good]
          } else if (item.showThreshold && !item.showBest) {
            data.data = [down, up]
          } else if (!item.showThreshold && item.showBest) {
            data.data = [good]
          }
          this.$set(this.series[index],'markLine', data);
        },
        lineTypechange(value,index){
            var markLine =util.util.cloneObj(this.series[index].markLine);
            if(value=='1'){
                markLine.data[0].yAxis=0;
            }else{
                markLine.data[0].yAxis=null;
            }
            this.$set(this.series[index],'markLine',markLine)
        }
    },
    mounted(){
        console.log('init graphoptions', this.graphOptions)
        let t = []
        for (let i = 0; i < this.series.length; i++) {
          const serie = this.series[i];
          if (serie.markLine && serie.markLine.data && serie.markLine.data.length === 3) {
            serie.showThreshold = true
            serie.showBest = true
          } else if (serie.markLine && serie.markLine.data && serie.markLine.data.length === 1) {
            serie.showThreshold = false
            serie.showBest = true
          } else if (serie.markLine && serie.markLine.data && serie.markLine.data.length === 2) {
            serie.showThreshold = true
            serie.showBest = false
          } else {
            serie.showThreshold = false
            serie.showBest = false
          }
          if (this.numbers[i]) {
            serie.number = this.numbers[i]
          }
          t.push(serie)
        }
        this.seriesHandle = t
    }
}
</script>

